<template>
  <view v-if="dataList.length" class="container">
    <view class="idiom-box">
      <view class="context-box">
        <uni-badge :text="`${page} / ${dataList?.length}`" type="primary" />
        <view class="person-name">
          <text>{{ dataList?.[page - 1]?.name }}</text>
          <!-- <view class="pinyin">{{ dataList?.[page - 1].pinyin }}</view> -->
        </view>

        <uni-section title="介绍" type="line">
          <uni-card>
            <scroll-view scroll-y style="height: 800rpx">
              <text class="description">{{
                dataList?.[page - 1].description
              }}</text>
            </scroll-view>
          </uni-card>
        </uni-section>
      </view>
    </view>

    <view class="action-box">
      <button class="but" :disabled="page === 0" @click="lastHandle">
        上一个
      </button>
      <button class="but" @click="openIdiomListPopupHandle">列表</button>
      <button class="but" @click="nextHandle">下一个</button>
    </view>

    <uni-popup ref="idiomListPopupRef" :is-mask-click="true">
      <view class="idiomList-box">
        <view
          v-for="(item, index) in dataList"
          :key="index"
          class="idiom-item"
          @click="goStudyHandle(item, index)"
        >
          <view class="title-box">
            {{ index + 1 }}. <text class="title">{{ item.name }}</text>
          </view>

          <view v-if="studyIdList.includes(item.id)" class="status status-ok">
            已学习
          </view>
          <view v-else class="status status-no"> 未学习 </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { onMounted } from 'vue'

import * as Api from '@/apis/shen-lun/person-deeds'

const page = ref(1)

const idiomListPopupRef = ref()
const dataList = ref<
  Array<
    Api.PersonDeeds & {
      isStudy: boolean
    }
  >
>([])

uni.getStorage({
  key: 'personDeedsListKey',
  success(result) {
    page.value = result.data.page || 1
    studyIdList.value = result.data.ids || []
  },
})

watch(
  () => page.value,
  (n) => {
    uni.setStorage({
      key: 'personDeedsListKey',
      data: {
        page: n,
        ids: studyIdList.value,
      },
    })
  },
)

/**
 * 获取成语列表
 */
onMounted(async () => {
  const res = await Api.getAllList()
  dataList.value = res.data as any
})

/**
 * 打开成语列表弹窗
 */
const openIdiomListPopupHandle = () => {
  idiomListPopupRef.value.open('bottom')
}

const studyIdList = ref<number[]>([])
const studyIdiom = (item: Api.PersonDeeds) => {
  dataList.value[page.value - 1].isStudy = true
  studyIdList.value.push(item.id)
}

/**
 * 上一个
 */
const lastHandle = () => {
  if (page.value === 1) {
    uni.showToast({
      title: '我是有底线的~',
      icon: 'none',
    })
    return
  }
  studyIdiom(dataList.value[page.value - 1])
  page.value--
}

/**
 * 下一个
 */
const nextHandle = () => {
  if (page.value === dataList.value.length) {
    uni.showToast({
      title: '我是有底线的~',
      icon: 'none',
    })
    return
  }
  studyIdiom(dataList.value[page.value - 1])
  page.value++
}

const goStudyHandle = (item: any, index: number) => {
  page.value = index + 1
  studyIdiom(item)
  idiomListPopupRef.value.close()
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .context-box {
    width: 100%;
    height: 100%;

    .person-name {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      font-weight: 700;
    }

    .description {
      line-height: 2rem;
    }
  }

  .idiomList-box {
    width: 100%;
    height: 80vh;
    background-color: #fff;
    box-sizing: border-box;
    padding: 20rpx 50rpx;
    overflow: auto;

    .idiom-item {
      width: 100%;
      height: 100rpx;
      background-color: #fff;
      border-bottom: 1rpx solid #f2f2f2;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .title-box {
        width: auto;
        .title {
          margin: 0 20rpx;
          font-weight: 700;
        }
      }

      .status {
        padding: 10rpx 15rpx;
        border-radius: 10rpx;
      }

      .status-ok {
        background-color: #57bd6a;
        color: #fff;
      }
      .status-no {
        background-color: #ebebeb;
        color: #3f3f40;
      }
    }
  }

  .idiom-box {
    width: 90%;
    height: 80%;
    background-color: #fff;
    margin-top: 20rpx;
    border-radius: 20rpx;
    box-sizing: border-box;
    padding: 50rpx;
  }

  .action-box {
    width: 90%;
    background-color: #fff;
    display: flex;
    border-radius: 20rpx;
    margin-top: 10rpx;
    padding: 20rpx 0;

    .but {
      height: 70rpx;
      background-color: #0680d7;
      color: #fff;
      font-size: 0.85rem;
    }
  }
}
</style>
